Ext.define('Sencha.view.DictionaryFormView', {
    extend: 'Ext.Container',
    xtype: 'dictionaryformview',
           
    config: {
        title: 'Dictionary',
        styleHtmlContent: true,
        scrollable: 'vertical'
    },   
	
    initialize: function () {
    	this.callParent(arguments);        
        
        // Form for entering dictionary entry info.
        var fieldSet = {
	        xtype: 'fieldset',
	        id: 'dicFormFieldSet',
	        items: [
	            {
	                xtype: 'textfield',
	                name : 'sourceword',
	                label: 'Source Word',
                    id: 'sourceWordField'
	            },
	            {
	                xtype: 'textfield',
	                name : 'partofspeech',
	                label: 'Part Of Speech',
                    id: 'partOfSpeechField'
	            },
	            {
	                xtype: 'textfield',
	                name : 'inflection',
	                label: 'Inflection',
	                id: 'inflectionField'
	            },
	            {
	                xtype: 'textfield',
	                name : 'disambiguation',
	                label: 'Disambiguation',
	                id: 'disambiguationField'
	            },
	            {
	                xtype: 'textfield',
	                name : 'targetword',
	                label: 'Target Word',
	                id: 'targetWordField'
	            },
	            {
	                xtype: 'textareafield',
	                name : 'detailedEntry',
	                label: 'Detailed Entry',
	                id: 'detailedEntryField'
	            },
	            {
	                xtype: 'textfield',
	                name : 'note',
	                label: 'Note',
	                id: 'noteField'
	            },
	            {
                	xtype: 'hiddenfield',
                	name: 'targetIdField',
                	id: 'targetIdField'
                },
                {
                	xtype: 'hiddenfield',
                	name: 'sourceIdField',
                	id: 'sourceIdField'
                },
                {
                	xtype: 'hiddenfield',
                	name: 'speakerIdField',
                	id: 'speakerIdField'
                },
                {
                	xtype: 'hiddenfield',
                	name: 'collectorIdField',
                	id: 'collectorIdField'
                }
	        ]
           };
       
       

       
       var metadataContainer = {
       		xtype: 'container',
       		layout: 'hbox',
       		
       		items:[
       			{
       				xtype: 'label',
       				html: 'Metadata'
       			},
       			{
       				xtype: 'spacer'
       			},
       			{
       				xtype: 'button',
       				text: 'Metadata',
       				id: 'dicMetadataButton'
       			
       			}
       		
       		]
       
       };
       	
        // Image button - used to add images via camera
        var imageButton = {
           xtype: 'button',
           text: 'Add Photo',
           cls: 'addImageButtonCls',
           id: 'addImageButton'
        };
         
        /*
        // Record button - used to record audio
        var audioRecordButton = {
           xtype: 'button',
           //text: 'Rec',
           cls: 'audioRecordButtonCls'        
        };
        */
        var soundRecorder = {
           xtype: 'soundrecorder',
           cls: 'audioRecordButtonCls'
        };
        
        var deleteContainer = {
        		xtype: 'container',
        		layout: 'hbox',
        		items:[
        			{
        				xtype: 'button',
        				text: 'Delete',
        				id: 'deleteDictionaryButton'
        			}
        			
        		]
        
        };
          
        this.add([soundRecorder, fieldSet, metadataContainer, imageButton, deleteContainer]); 

    }

});